import QtQuick 1.0

Rectangle {
    id: pageControl

    clip: true

    property ListModel listModel

    signal pageChanged(int page)

    Component {
	id: appDelegate

	Rectangle {
	    smooth: true
	    width: pageControl.width
	    height: pageControl.height
	    color: pageColor

	    Text {
		anchors.centerIn: parent
		color: "white"
		text: name
	    }
	}
    }

    PathView {
	id: myPathView

	width: parent.width
	anchors.top: parent.top
	anchors.bottom: pageIndicator.top

	Keys.onRightPressed: if (!moving && interactive) incrementCurrentIndex()
	Keys.onLeftPressed: if (!moving && interactive) decrementCurrentIndex()

	flickDeceleration: 500

	onCurrentIndexChanged: pageChanged(currentIndex)

	preferredHighlightBegin: 0.5
	preferredHighlightEnd: 0.5
	focus: true
	interactive: true
	model: listModel
	delegate: appDelegate
	path: Path {
	    startX: - pageControl.width * listModel.count / 2 + pageControl.width / 2
	    startY: pageControl.height / 2
	    PathLine {
		x: pageControl.width * listModel.count / 2 + pageControl.width / 2
		y: pageControl.height / 2
	    }
	}
    }

    Rectangle {
	id: pageIndicator

	width: parent.width
	height: 40
	anchors.bottom: parent.bottom

	Row {
	    anchors.centerIn: parent
	    Repeater {
		model: listModel.count
		delegate: Rectangle {
		    width: 20
		    height: pageIndicator.height
		    color: "white"
		    Rectangle {
			anchors.centerIn: parent
			width: 10
			height: 10
			color: (myPathView.currentIndex == index ? "black" : "gray")
		    }
		}
	    }
	}

	color: "white"
    }
}
